<html>
<title>组件的单向数据流</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="container">
        <!-- <my-a>使用slot之后，如果组件标签之间有内容则显示原来的内容。</my-a> -->
        <my-a>
            <ul slot="s1">
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
            <ol slot="s2">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </my-a>

    </div>

    <template id="a">
        <div>
            <slot name="s2"></slot>
            <h3>我是组件a</h3>
            <slot name="s1"></slot>
            <!-- <slot>如果原来的组件没有内容则可以显示自定义的内容</slot> -->
        </div>
    </template>



    <script>
        var A = {
            template: '#a',
        }
        var vm = new Vue({
            el: "#container",
            components: {
                'my-a': A
            }
        });
    </script>

</body>

</html>